 <template>
    <div>
        <!--头部-->
        <div id="header" class="flex">
            <div class="header-crumbs" @click="checkSite(0)">
                <img src="../img/crumbs.png" alt="">
            </div>
            <div class="c-f fs-32" @click="checkSite(1)">
                 {{headerSchool}}<img src="../img/down.png" alt="" class="down">
            </div>
            <div class="header-crumbs">
                <router-link to="/addFriend">
                    <img src="../img/chat.png" alt="">
                </router-link>
            </div>
        </div>
        <div v-if="flag" class="sidebar" @click="checkSite(0)">
            <div>
                <ul class="sidebar-slit">
                    <li>
                        <router-link to="/My">
                            <div class="host-list fs-32 m-t-28">
                                <i class="iconfont icon-wode-copy fs-36 f-w"></i>
                                <span class="m-l-25">我的</span>
                            </div>    
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/mygoods">
                            <div class="host-list fs-32"> 
                                <i class="iconfont icon-56 fs-36"></i>
                                <span class="m-l-25">我的订单</span>
                            </div>
                        </router-link>          
                    </li>
                    <li>
                        <router-link to="/opinion">
                            <div class="host-list fs-32">
                                <i class="iconfont icon-xie fs-36"></i>
                                <span class="m-l-25">意见反馈</span>
                            </div>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/wallet">
                            <div class="host-list fs-32"> 
                                <i class="iconfont icon-wallet fs-36 f-w"></i>
                                <span class="m-l-25">我的钱包</span> 
                            </div>
                        </router-link>
                    </li>
                    <li>
                        <div class="m-b-4 fs-32 c-c2" @click="quit()">
                            退出当前账号
                        </div>
                    </li>
                    <!--<li class="m-b-4 fs-32 m-l-25">
                        <router-link to="/setting">
                            <i class="iconfont icon-shezhi fs-36"></i>
                            <span class="m-l-25">全局设置</span>
                        </router-link>
                    </li>-->
                </ul>
            </div>
        </div>
        <div class="choiceSchool" v-if="xflag">
            <div class="tc m-t-28">
                <input type="text" placeholder="请输入大学名称" @keyup="choiceSchool" v-model="school" class="b-1">
                <span class="m-l-25 c-f b-c2 p-1" @click="choiceSchool">确定</span>
            </div>
            <nav>
                <ul class="width-75" id="school-list">
                    <li class="z-header m-l-5" v-for="val in schoolkind" :data-schoolId="val.schoolId" @click="clickSchool(val.schoolId,val.name), checkSite(1)">{{val.name}}</li>
                </ul>
            </nav>
        </div>
        <div>
            <router-view></router-view>
        </div>
        
    </div>    
</template>
<script>
    
    export default {
        data() {
            return{
              flag:false,
              xflag:false,
              school:'',//用户输入的学校
              schoolkind:"",//后台返回学校的信息
              schoolPoiId:"",//用来保存学校的Id
              headerSchool:"选择学校"
            }     
        },
        methods: {
            checkSite(type) {
                if(type == 0){
                    this.flag = !this.flag;
                    if(this.flag == false){
                        this.move()
                    }else{
                        this.stop()
                    }
                }else{
                    this.xflag = !this.xflag;
                    if(this.xflag == false){
                        this.move()
                    }else{
                        this.stop()
                    }
                }
                
            },
            stop(){
                var mo=function(e){e.preventDefault();};
                document.body.style.overflow='hidden';
                document.addEventListener("touchmove",mo,false);//禁止页面滑动
            },
            move(){
                var mo=function(e){e.preventDefault();};
                document.body.style.overflow='';//出现滚动条
                document.removeEventListener("touchmove",mo,false);
            },
            choiceSchool(){
                var params =  new URLSearchParams();
                params.append("name", this.school);

                this.$http({
                    method: 'post',
                    url: localPath + '/school/likeSchool',
                    data:params
                }).then((data)=>{
                    // 把后台的数据保存到this.schoolkind里面
                    this.schoolkind=data.data;
                     
                }).catch((error)=>{
                    console.log(error);
                })
            },
            clickSchool(ev,name){
                window.localStorage.schoolId = ev;
                window.localStorage.name = name;
                this.headerSchool = localStorage.name;
                this.$router.go(0);
                console.log(ev);
            },
            isSchoolName(){
                // 如果没有创建localStorage.name的话什么都不做
                if(localStorage.name == undefined){

                }else{
                    this.headerSchool = localStorage.name;
                }
                
            },
            quit(){
                window.localStorage.phone = "";
                window.localStorage.Password  = "";
                this.$router.push({ path: '/login' });
            }
        },
        mounted() {
            this.isSchoolName()
        }
    }

</script>
<style scoped>
    #header{
        font-size: .3rem;
	    height: .88rem;
        line-height: .88rem;
        padding: 0 .3rem;
	    background-color: #c29354;
    }
    .header-crumbs img{
        width: .4rem;
        height: .3rem;
    }
   .down{
        width: .3rem;
   }
  

 
    .host-list{
        padding:0 0 .4rem .25rem;
        
    }
    .sidebar{ 
        position: fixed;
        top: .89rem;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.3);
        z-index: 999;
    }
    .sidebar > div{
        position: absolute;
        width: 4.2rem;
        height: 4.81rem;
        left: .17rem;
        background: #ffffff;
    }
    .choiceSchool{
        position: absolute;
        width: 100vw;
        height: 70vh;
        background: #ffffff;
        z-index: 999;
    }
    .choiceSchool input{
        width: 5rem;
    }
</style>